<template>

  <div v-if="showPage" class="app-container">
    <el-row :gutter="20">
      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
        <pane size="20" min-size="15" max-size="30" class="left-pane">
          <el-col>
            <div class="head-container">
              <div class="tree-header">
                <span>部门总览</span>
              </div>
              <el-tree 
                :props="props" 
                :load="loadNode" 
                lazy 
                @node-click="setuser"
                class="department-tree"
                node-key="id"
                :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node }">
                  <i :class="node.expanded ? 'el-icon-folder-opened' : 'el-icon-folder'" />
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </div>
          </el-col>
        </pane>
        <pane size="80" class="right-pane">
          <div class="table-container">
            <el-table 
              v-loading="loading" 
              :data="List" 
              border 
              stripe
              style="width: 100%"
              height="calc(100vh - 180px)">
              <el-table-column 
                label="ID" 
                align="center" 
                key="userid" 
                prop="userid" 
                width="80"
                :show-overflow-tooltip="true" />
              <el-table-column 
                label="头像" 
                align="center" 
                key="avatar" 
                width="80">
                <template slot-scope="scope">
                  <el-avatar :src="scope.row.avatar" size="small" v-if="scope.row.avatar"></el-avatar>
                  <el-avatar icon="el-icon-user-solid" size="small" v-else></el-avatar>
                </template>
              </el-table-column>
             <el-table-column 
                label="姓名" 
                align="center" 
                key="name" 
                prop="name" 
                :show-overflow-tooltip="true" />
              <el-table-column 
                label="职务" 
                align="center" 
                key="title" 
                prop="title" 
                :show-overflow-tooltip="true" />
              <el-table-column 
                label="工号" 
                align="center" 
                key="jobNumber" 
                prop="jobNumber" 
                :show-overflow-tooltip="true" />
              <el-table-column 
                label="部门排序" 
                align="center" 
                key="deptOrder" 
                prop="deptOrder" 
                :show-overflow-tooltip="true" />
              <el-table-column 
                label="状态" 
                align="center" 
                key="active" 
                prop="active" 
                width="80">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.active ? 'success' : 'danger'">
                    {{ scope.row.active ? '启用' : '禁用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column 
                label="管理员" 
                align="center" 
                key="admin" 
                prop="admin" 
                width="80">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.admin ? 'warning' : 'info'">
                    {{ scope.row.admin ? '是' : '否' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column 
                label="邮箱" 
                align="center" 
                key="email" 
                prop="email" 
                :show-overflow-tooltip="true" />

            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleUpdate(scope.row)">会议日程</el-button>
                
                </template>
              </el-table-column>



            </el-table>
            <div class="load-more">
              <el-button 
                v-loading="loading" 
                type="primary" 
                size="small" 
                plain
                v-if="userList.hasMore"
                @click="getList">
                加载更多 <i class="el-icon-arrow-down"></i>
              </el-button>
              <el-button 
                v-else
                type="info" 
                size="small" 
                plain
                disabled>
                没有更多数据
              </el-button>
            </div>
          </div>
        </pane>
      </splitpanes>
    </el-row>
<el-dialog
  title="会议日程列表"
  :visible.sync="show"
  width="70%"
  :before-close="handleClose"
  class="meeting-dialog">
  
  <el-table 
    :data="showpop"
    v-loading ='loading1'
    style="width: 100%"
    @row-click="handleRowClick"
    class="meeting-table">
    
    <el-table-column
      prop="summary"
      label="会议主题"
      min-width="180">
      <template slot-scope="scope">
        <div class="meeting-summary">
          <span>{{ scope.row.summary }}</span>
          <el-tag 
            size="mini" 
            :type="scope.row.status === 'confirmed' ? 'success' : 'warning'"
            style="margin-left: 8px;">
            {{ scope.row.status === 'confirmed' ? '已确认' : scope.row.status }}
          </el-tag>
        </div>
      </template>
    </el-table-column>
    
    <el-table-column
      label="时间"
      width="220">
      <template slot-scope="scope">
        {{ formatDateTime(scope.row.start.dateTime) }} - {{ formatTime(scope.row.end.dateTime) }}
      </template>
    </el-table-column>
    
    <el-table-column
      prop="organizer.displayName"
      label="组织者"
      width="120">
    </el-table-column>
    
   <el-table-column
  label="地点"
  width="150">
  <template slot-scope="scope">
    <template v-if="scope.row.location && scope.row.location.displayName">
      <i class="el-icon-location-outline"></i> {{ scope.row.location.displayName }}
    </template>
    <template v-else-if="scope.row.location && !scope.row.location.displayName">
      <i class="el-icon-location-outline"></i> 未指定地点
    </template>
    <template v-else>
      <span class="no-location">无地点信息</span>
    </template>
  </template>
</el-table-column>
    
    <!-- <el-table-column
      label="操作"
      width="80">
      <template slot-scope="scope">
        <el-button 
          size="mini"
          @click.stop="viewMeetingDetail(scope.row)">
          详情
        </el-button>
      </template>
    </el-table-column> -->
  </el-table>
  

  
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="show = false">关 闭</el-button>
  </span>
</el-dialog>



    <!-- <el-dialog
        title="会议日程"
        :visible.sync="show"
        width="30%"
        :before-close="handleClose">
        <span>{{showpop}}</span>
        <span slot="footer" class="dialog-footer">
        
            <el-button type="primary" @click="show = false">关 闭</el-button>
  </span>
</el-dialog> -->
  </div>
  <div v-else>
  <el-empty description="暂无权限"></el-empty>
  </div>
</template>

<script>
import { queryDeptList, queryDepUserList,queryScheduleList } from '@/api/system/metting'
import Treeselect from '@riophae/vue-treeselect'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import {
  listManage,
} from "@/api/system/manage";
export default {
  name: 'DepartmentUser',
  components: { Treeselect, Splitpanes, Pane },
  data() {
    return {
       showPage:true,
        loading1:false,
         activeMeeting: '0', // 当前活动的会议标签页
    detailVisible: false, // 详情对话框可见性
    currentMeeting: null ,// 当前查看的会议详情
      msg: '测试',
      deptId: 1,
      List: [],
      showpop:[],
      show:false,
      userList: [],
      deptOptions: undefined,
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      props: {
        label: 'name',
        isLeaf: 'leaf',
      },
      queryParams: {
        pageNum: 1,
        size: 10,
      },
    }
  },
  created() {
    this.getShow()
    this.getList()
  },
  methods: {
   getShow(){
  const a = {
    pageNum: 1,
    pageSize: 10
  }
  listManage(a).then(res => {
    console.log(res.rows);
    const foundItem = res.rows.find(item => item.id === 38);
    if (foundItem) {
      this.showPage = foundItem.isAuth;
    }
  })
},
     // 格式化日期时间
  formatDateTime(datetime) {
    if (!datetime) return '未设置';
    const date = new Date(datetime);
    return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
  },
  
  // 仅格式化时间
  formatTime(datetime) {
    if (!datetime) return '';
    const date = new Date(datetime);
    return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
  },
  
  // 完整格式化日期时间
  formatFullDateTime(datetime) {
    if (!datetime) return '未知';
    const date = new Date(datetime);
    return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
  },
  
  
     // 查看会议详情
  viewMeetingDetail(meeting) {
    this.currentMeeting = meeting;
    this.detailVisible = true;
  },
  
  // 表格行点击事件
  handleRowClick(row, column, event) {
    if (column.label !== '操作') {
      this.viewMeetingDetail(row);
    }
  },
    handleClose(){
       this.show = false
    },
    handleUpdate(e){
        console.log(e.unionid);
        this.showpop = []
        this.show = true
        const a = {
            unionId:e.unionid
        }
        this.loading1 = true
        queryScheduleList(a).then(res=>{
            console.log(res);
              this.loading1 = false
            this.showpop = res.data.body.events
        })
    },
    setuser(node) {
      console.log(node)
      this.deptId = node.id
      this.List = []
      this.userList = []
      this.getList()
    },
    getList() {
      const a = {
        deptId: this.deptId,
        cursor: this.userList.nextCursor || 0,
        size: 10,
      }
      this.loading = true
      queryDepUserList(a).then((res) => {
        console.log(res)
        this.loading = false
        this.userList = JSON.parse(JSON.stringify(res.data.result))
        this.List = this.List.concat(res.data.result.list)
      })
    },
    getnode() {
      queryDeptList().then((res) => {
        console.log(res.data.result, 'queryDeptList')
      })
    },
    async loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '辽宁省肿瘤医院', id: 1 }])
      }
      const parentId = node.data.id
      this.deptId = node.data.id
      try {
        const res = await queryDeptList({ deptId: parentId })
        const children = res.data.result || []
        const nodes = children.map((item) => ({
          name: item.deptName || item.name,
          id: item.deptId || item.id,
          leaf: false,
        }))
        resolve(nodes)
      } catch (error) {
        console.error('加载子节点失败:', error)
        resolve([])
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
    },
    filterDisabledDept(deptList) {
      return deptList.filter((dept) => {
        if (dept.disabled) {
          return false
        }
        if (dept.children && dept.children.length) {
          dept.children = this.filterDisabledDept(dept.children)
        }
        return true
      })
    },
  },
}
</script>

<style scoped>
.app-container {
  padding: 15px;
  height: calc(100vh - 50px);
}

.left-pane {
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.right-pane {
  padding: 10px 10px 10px 20px;
}

.tree-header {
  padding: 8px 10px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #ebeef5;
}

.department-tree {
  background: transparent;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}

.custom-tree-node i {
  margin-right: 6px;
  color: #409EFF;
}

.table-container {
  background: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.load-more {
  margin-top: 15px;
  text-align: center;
}

.el-table {
  font-size: 14px;
}

.el-table::before {
  height: 0;
}

.el-tag {
  margin: 2px;
}
</style>
<style scoped>
/* 表格样式 */
.meeting-table {
  margin-top: -20px;
}

.meeting-table .el-table__row {
  cursor: pointer;
}

.meeting-table .el-table__row:hover {
  background-color: #f5f7fa;
}

.meeting-summary {
  display: flex;
  align-items: center;
}

/* 标签页样式 */
.meeting-dialog .el-tabs__content {
  padding: 0 20px;
}

/* 空状态样式 */
.no-meetings {
  padding: 40px 0;
}
</style>